<template>
  <div>
    <el-row>
      <el-col :span="12">
          <div>
            <div class="first-div">
              <div class="name">
                <!-- <p class=""></p> -->
                <p>点击录制音频</p>
                <img  src="../../static/image/timg.gif" alt="" @click="translationStart" />
              </div>
            </div>
            <div class="result">
              <div>识别结果：{{ sbjg }}</div>
              <button class="btn" @click="translationEnd">停止</button>
            </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="second-div">
          <!-- <span>请输入需要转化得文字:<input type="text"></span> -->
          <span style="color: aliceblue;"> 请输入需要转化得文字:
            <input type="text" id="t2">
			      <input type="button" id="tts2" @click="dotts2" value="播放">
          </span>
        </div>
        <!-- <div>
          <button class="btn" @click="transform">播放</button>
        </div> -->
        <div>
          <div id="bdtts_div_id">
            <audio id="tts_autio_id" autoplay="autoplay">
              <embed id="tts_embed_id" height="0" width="0" src="">
            </audio>
          </div>
        </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import IatRecorder from "@/assets/js/IatRecorder.js";
import axios from 'axios'

export default {
  data() {
    return {
      res: null,
      iatRecorder: new IatRecorder("en_us", "mandarin", "5f27b6a9"),
      sbjg: ''
    };
  },
  watch: {
    'iatRecorder.resultText': {
      handler(nvl, ovl) {
        this.sbjg = nvl
        this.getPost(nvl,"1")
      }
    }
  },
  mounted() {
    this.test()
  },
  created() {},
  methods: {
    test() {
      this.iatRecorder.resultText = ''
      console.log(this.iatRecorder.resultText);
    },
    translationStart() {
      this.iatRecorder.start();
    },
    translationEnd() {
      this.iatRecorder.stop();
    },
    getresult(){
      this.iatRecorder.start()
    },
    // 文字转语音
    dotts2(){
      console.log(1111)
      var value = document.getElementById('t2').value;
      var utterance = new SpeechSynthesisUtterance(value);
      window.speechSynthesis.speak(utterance);
      this.getPost(value,"2");
    },
    doTTS(){
      var ttsDiv = document.getElementById('bdtts_div_id');
      var ttsAudio = document.getElementById('tts_autio_id');
      var ttsText = document.getElementById('ttsText').value;

      ttsDiv.removeChild(ttsAudio);
      var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
      var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=9&text='+ttsText+'" type="audio/mpeg">';
      var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
      var au2 = '</audio>';
      ttsDiv.innerHTML = au1 + sss + eee + au2;
      ttsAudio = document.getElementById('tts_autio_id');
      ttsAudio.play();
	  },
    // 发送请求 使用form 表单得方式传参
    getPost(res, type){
      axios({
        method: 'post',
        url: 'http://localhost:8087/saveLog',
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        data: "text=" + res + "&type=" + type,
      }).then(res => {
        console.log(res);
      })
    },

  }
};
</script>
<style scoped>
.first-div {
  display: flex;
  align-items: center;
}
.name{
  width: 200px;
  height: 200px;
  margin-bottom: 12px;
}

.name > img {
  width: 140px;
  height: 140px;
}
.name > p {
  display: flex;
  margin-left: 50px;
  color: aliceblue;
}

.result {
  width: 200px;
}
.result > div{
  margin-bottom: 20px;
  color: aliceblue;
}
.result > button {
  margin-right: 12px;
  height: 20px;
  color: aliceblue;
}
.el-row {
  display: flex;
}

.second-div {
  margin-left: 100px;
  margin-top: 20px;
}
.second-div > span > :nth-child(1){
  width: 300px;
  height: 20px;
}
button {
outline: none;
background-color: transparent;
cursor: pointer;
}
/* img {
  height: 150px;
  width: 140px;
  margin-left: 50px;
  display: block;
} */

/* .body {
  display: flex;
  user-select: none;

}
audio {
  display: block;
  margin-bottom: 10px;
}
#audio-container {
  padding: 20px 0;
}
.ui-btn {
  display: inline-block;
  padding: 5px 20px;
  font-size: 14px;
  line-height: 1.428571429;
  box-sizing: content-box;
  text-align: center;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  color: #555;
  background-color: #fff;
  border-color: #e8e8e8;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ui-btn:hover,
.ui-btn.hover {
  color: #333;
  text-decoration: none;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
}
.ui-btn:focus,
.ui-btn:active {
  color: #333;
  outline: 0;
}
.ui-btn.disabled,
.ui-btn.disabled:hover,
.ui-btn.disabled:active,
.ui-btn[disabled],
.ui-btn[disabled]:hover,
.ui-state-disabled .ui-btn {
  cursor: not-allowed;
  background-color: #eee;
  border-color: #eee;
  color: #aaa;
}
.ui-btn-primary {
  color: #fff;
  background-color: #39b54a;
  border-color: #39b54a;
  position: fixed;
  bottom: 1.5rem;
  width: 80%;
  margin-left: 10%;
  padding: 0.5rem 0;
}
.ui-btn-primary:hover,
.ui-btn-primary.hover {
  color: #fff;
  background-color: #16a329;
  border-color: #16a329;
}
.ui-btn-primary:focus,
.ui-btn-primary:active {
  color: #fff;
}
.ui-btn-primary.disabled:focus {
  color: #aaa;
}

body {
  margin: 0;
  padding: 0;
}
#mask {
  width: 43%;
  background: rgba(0, 0, 0, 0.05);
  padding: 3rem 0 1rem 0;
  display: none;
  margin: 2rem auto;
  margin-top: 51%;
}
#mask p {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.5);
}

.name {
  width: 240px;
}
.transform-text {
} */
</style>
